<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      offset='10'
    >
      <ArticleItem
        v-for="obj in list"
        :key="obj.art_id"
        :artObj="obj"
        @dislikeEv='dislikeFn'
        @reportEv="reportFn"
        @click.native="itemClickFn(obj.art_id)"
      ></ArticleItem>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '../../components/ArticleItem.vue'
import { getAllArticleListAPI, dislikeArticleAPI, reportArticleAPI } from '@/api'
import { Toast } from 'vant'

export default {
  props: {
    // list: Array // 文章列表数组
    channelId: Number // 传的是频道ID
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      theTime: (new Date()).getTime(),
      isLoading: true,
      otherReason: '',
      showReport: true
    }
  },
  components: {
    ArticleItem
  },
  async created () {
    const res2 = await getAllArticleListAPI({
      channel_id: this.channelId, // 点击谁的频道id就获取谁的数据
      timestamp: (new Date()).getTime() // 刚打开页面 获得当前的时间戳
    })
    // console.log(res2)
    this.list = res2.data.data.results
    this.theTime = res2.data.data.pre_timestamp
  },
  methods: {
    // 发送请求的代码有好几处，封装一个专门发送请求 的方法
    async getArticleListFn () {
      const res = await getAllArticleListAPI({
        channel_id: this.channelId, // 点击谁的频道id就获取谁的数据
        timestamp: this.theTime // 获得上一页的时间戳
      })
      // console.log(res)
      this.list = [...this.list, ...res.data.data.results]
      // 获取完当前数据后，将上一页的时间戳赋值给theTime,
      this.theTime = res.data.data.pre_timestamp

      this.loading = false // 如果不关闭，底部一直是加载中状态，再次触底会再触发onLoad
      // 如果数据全部获取完毕，将finished
      if (res.data.data.pre_timestamp === null) { // 如果本次回来的数据是最后，没有更多了
        this.finished = true
      }
    },

    // 底部加载 事件方法
    async onLoad () {
      if (this.list.length === 0) {
        this.loading = false
        return // 如果页面没有数据，没有高度，让本次onLoad逻辑代码不执行
      }
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.getArticleListFn()
    },
    // 顶部 - 刷新数据事件方法
    async onRefresh () {
      Toast('刷新成功')
      // 下拉刷新 list数组清空，将时间戳改为当前的 来一份新的数据
      this.list = []
      this.theTime = new Date().getTime()

      this.getArticleListFn()
      // 刷新完后，再将isLoading设置为false
      this.isLoading = false
    },
    // 自定义事件 传了该文章的id 点击不感兴趣，调用对文章不喜欢接口，传入参数
    async dislikeFn (id) {
      await dislikeArticleAPI({ articleId: id })
    },

    // remark是其他问题，需用户自己输入举报内容(其它问题在二级面板数据的value为0)
    async reportFn (id, value) { //
      await reportArticleAPI({
        artId: id,
        type: value
      })
    },
    // 点击跳转到文章详情页
    itemClickFn (artId) {
      this.$router.push({
        path: `/detail?art_id=${artId}`
      })
    }

  }
}
</script>

<style>

</style>
